<template>
  <div class="theme-active-text-color content">
    <div class="form_content">
      <el-form :model="dataForm" :rules="rules" ref="dataForm" label-width="100px" class="demo-dataForm">
      <el-form-item label="材料名称:" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>
      <el-form-item label="归属种类:" prop="type">
        <el-select v-model="dataForm.type" placeholder="种类">
          <el-option label="区域一" value=""></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="材料Id:" prop="goods_id">
        <el-input v-model="dataForm.goods_id"></el-input>
      </el-form-item>
      <el-form-item label="材料图片:" prop="goods_img">
        <img class="goods_img" v-if="dataForm.goods_img" :src='dataForm.goods_img' />
        <el-upload
            class="upload-demo"
            action
            :multiple="false"
            :show-file-list="false"
            accept=".jpg, .jpeg, .png, .ppt ,pptx"
            :auto-upload="false"
            :on-change="imgChange">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </el-form-item>
      <el-form-item label="入库数量:" prop="count">
        <el-input v-model="dataForm.count"></el-input>
      </el-form-item>
       <el-form-item label="采购单价:" prop="price">
        <el-input v-model="dataForm.price"></el-input>
      </el-form-item>
      <el-form-item label="计量单位:" prop="unit">
        <el-input v-model="dataForm.unit"></el-input>
      </el-form-item>
      <el-form-item label="使用量" prop="used">
        <el-input v-model="dataForm.used"></el-input>
      </el-form-item>
      <el-form-item label="剩余量:" prop="last">
        <el-input v-model="dataForm.last"></el-input>
      </el-form-item>
      <el-form-item label="已结算:" prop="settled">
        <el-input v-model="dataForm.settled"></el-input>
      </el-form-item>
       <el-form-item label="采购商家:" prop="merchant">
        <el-input v-model="dataForm.merchant"></el-input>
      </el-form-item>
      <el-form-item label="签订合同:" prop="isSigned">
        <el-switch 
          v-model="dataForm.isSigned" 
          active-text="已签"
          inactive-text="未签"
          active-value="1"
          inactive-value="0"></el-switch>
      </el-form-item>
     
      <el-form-item label="材料备注:" prop="content">
        <el-input type="textarea" v-model="dataForm.content"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('dataForm')">立即入库</el-button>
        <el-button @click="resetForm('dataForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </div>
  </div>
</template>

<script>
import { goodsEnter } from '@/api'
import fileImport from "@/utils/fileImport";
export default {
  name: "",
  components: {},
  data() {
    return {
      dataForm: {
          name: '',
          type: '',
          goods_id:'',
          count:'',
          price:'',
          unit:'',
          merchant:'',
          isSigned:'',
          content:'',
          goods_img:'',
          used:0,
          last:0,
          settled:0
        },
        rules: {
          name: [
            { required: true, message: '请输入材料名称', trigger: 'blur' },
          ],
          type: [
            { required: true, message: '请选择材料种类', trigger: 'change' }
          ],
          unit:[{required: true, message: '请输入计量单位', trigger: 'blur'}],
          merchant:[{required: true, message: '请输入采购商家', trigger: 'blur'}]
        }
    };
  },
  created() {},
  methods: {
    submitForm() {
      let _this=this;
        this.$refs.dataForm.validate(async (valid) => {
          if (valid) {
           let res = await goodsEnter(_this.dataForm);
            if(res.code=='200'){
              _this.$message({
                message: '入库成功',
                type: 'success'
              });
            }else{
              _this.$message({
                message: '入库失败',
                type: 'error'
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.dataForm.resetFields();
      },
      //上传图片
      imgChange(file){
        this.dataForm.goods_img = URL.createObjectURL(file.raw);
        fileImport({ file: file.raw }, "/upload/goods_img").then(res => {
          if(res){
            this.dataForm.goods_img = res.data
          }
        });
      },
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  .form_content{
    width: 100%;
    height: 90%;
    padding: 20px 10px 10px 0;
    overflow-y: auto;
    .el-input{
      width: 300px;
    }
  }
  .goods_img{
    width: 200px;
    height: 200px;
  }
}

</style>